<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发布工作</title>
    <script src="./js/jquery-3.1.1.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/loading.css"/>
    <style>
        input {
            display: block;
            width: 80%;
            height: 40px;
            line-height: 100%;
            font-size: 18px;
            padding-left: 20px;
            outline: none;
            margin-top: 10px;
            margin-bottom: 10px;
            border: 1px solid #cccccc;
            border-collapse: inherit;
        }

        input:focus {
            border: 1px solid #11a984;
            border-collapse: inherit;
        }

        select {
            display: block;
            width: 80%;
            height: 40px;
            line-height: 100%;
            font-size: 18px;
            padding-left: 20px;
            margin-top: 10px;
            outline: none;
            margin-bottom: 10px;
            border: 1px solid #cccccc;
            border-collapse: inherit;
        }

        select:focus {
            border: 1px solid #11a984;
            border-collapse: inherit;
        }

        input, select {
            box-sizing: border-box;
        }

        span {
            font-weight: normal;
            font-size: 12px;
            color: #777777;
        }

        #push-button {
            color: white;
            background: #00b38a;
            width: 80%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            margin-top: 20px;
            border-radius: 4px;
            cursor: pointer;
        }

        #push-button:hover {
            background: #11a984;
        }
    </style>
</head>
<body>

<img src="drawable/logo.png" alt="" width="152" height="46" style="margin: 20px;display: block">
<h1 style="color: #777777;margin:10px auto;text-align: center">职位发布</h1>

<ul style="margin: 50px auto;width: 40%">
    <li>
        <span style="display: block">职位名称：</span>
        <input id="name" type="text">
    </li>
    <li>
        <span style="display: block">职位标题：</span>
        <input id="title" type="text">
    </li>
    <li>
        <span style="display: block">任职要求：</span>
        <input id="desc" type="text">
    </li>
    <li>
        <span style="display: block">官方网址：</span>
        <input id="link" type="text">
    </li>
    <li>
        <span style="display: block">公司名称：</span>
        <select id="company">
        </select>
    </li>
    <li>
        <span style="display: block">工作种类：</span>
        <select id="industry">
        </select>
    </li>
    <li>
        <span style="display: block">标签：</span>
        <select id="tips">
        </select>
    </li>
    <li>
        <span style="display: block">福利待遇：</span>
        <input id="wages" type="text">
    </li>

    <h4 id="push-button" onclick="pushJob()">发&nbsp布</h4>
</ul>


<div id="loading"
     style="position: absolute;width: 100%;height: 100%;background: rgba(0,0,0,.5);z-index: 5;display: none;top:0">
    <section class="main">
        <!-- the component-->
        <ul class="bokeh">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </section>
</div>

<script type="text/javascript">
    function initFocusEvent() {
        var array = document.getElementsByTagName('li');
        $(array).each(function (index, element) {
            $(element).find('input').focus(function () {
                $(element).find('span').css({"color": "#11a984", "font-size": "15px", "font-weight": "bold"});
            })
            $(element).find('input').blur(function () {
                $(element).find('span').css({"color": "#777777", "font-size": "12px", "font-weight": "normal"});
            })
            $(element).find('select').focus(function () {
                $(element).find('span').css({"color": "#11a984", "font-size": "15px", "font-weight": "bold"});
            })
            $(element).find('select').blur(function () {
                $(element).find('span').css({"color": "#777777", "font-size": "12px", "font-weight": "normal"});
            })
        })
    }

    function initOnChangeEvent() {
        $("#industry").change(function () {
            getTipsList($("#industry").find("option:selected").text());
        })
    }

    $(document).ready(function () {
        initFocusEvent();
        initOnChangeEvent();
        getCompanyList();
        getIndustries();
    })

    /**
     * 获取公司列表
     */
    function getCompanyList() {
        loading(false);
        $.ajax({
            type: "POST",
            url: "/home",
            contentType: "application/json;charset:utf-8",
            data: JSON.stringify({"param": "companyList"}),
            dataType: "json",
            success: function (data) {
                loading(true);
                if (data.code == 0) {
                    createCompanyElements(data.data);
                } else {
                    alert("获取公司列表失败！");
                }
            }, error: function (message) {
                loading(true);
                alert(message);
            }
        })
    }

    function createCompanyElements(list) {
        $(list).each(function (index, item) {
            var option = $("<option></option>").val(item.compNo).text(item.compName);
            $("#company").append(option);
        })
    }

    /**
     * 获取工作种类列表
     */
    function getIndustries() {
        loading(false);
        $.ajax({
            type: "POST",
            url: "/home",
            contentType: "application/json;charset:utf-8",
            data: JSON.stringify({"param": "industries"}),
            dataType: "json",
            success: function (data) {
                loading(true);
                if (data.code == 0) {
                    createIndustryElements(data.data);
                    getTipsList(data.data[0].industryName);
                } else {
                    alert("获取工作种类信息失败！");
                }
            }, error: function (message) {
                loading(true);
                alert(message);
            }
        })
    }

    function createIndustryElements(list) {
        $(list).each(function (index, item) {
            var option = $("<option></option>").val(item.industryNo).text(item.industryName);
            $("#industry").append(option);
        })
    }


    /**
     * 获取标签列表
     */
    function getTipsList(industry) {
        $.ajax({
            type: "POST",
            url: "/home",
            contentType: "application/json;charset:utf-8",
            data: JSON.stringify(tipsJson(industry)),
            dataType: "json",
            success: function (data) {
                if (data.code == 0) {
                    createTipsElements(data.data);
                } else {
                    alert("获取标签列表失败！");
                }
            }, error: function (message) {
                alert(message);
            }
        })
    }

    function tipsJson(industry) {
        var json = {
            "param": "jobTipsList",
            "industry": industry
        }
        return json;
    }

    function createTipsElements(list) {
        $("#tips").empty();
        $(list).each(function (index, item) {
            var option = $("<option></option>").val(item.tip).text(item.tip);
            $("#tips").append(option);
        })
    }

    /**
     * 提交信息
     */
    function pushJob() {
        loading(false);
        $.ajax({
            type: "POST",
            url: "/home",
            contentType: "application/json;charset:utf-8",
            data: JSON.stringify(createJsonParam()),
            dataType: "json",
            success: function (data) {
                loading(true);
                if (data.code == 0) {
                    window.location = "jobManager.html";
                } else {
                    alert("发布失败！");
                }
            }, error: function (message) {
                loading(true);
                alert(message);
            }
        })
    }

    function createJsonParam() {
        var json = {
            "param": "addJob",
            "jName": $('#name').val(),
            "jTitle": $('#title').val(),
            "jDesc": $('#desc').val(),
            "jLink": $('#link').val(),
            "jCompanyId": $('#company').val(),
            "jCompany": $('#company').find("option:selected").text(),
            "jIndustry": $('#industry').find("option:selected").text(),
            "jIndustryId": $('#industry').val(),
            "jTips": $('#tips').val(),
            "jWages": $('#wages').val()
        }
        return json;
    }

    /**
     * 隐藏显示加载框
     */
    function loading(hide) {
        if (hide) {
            $("#loading").css("display", "none");
        } else {
            $("#loading").css("display", "block");
        }
    }

    $("#tip-error").css("display", "none");
</script>
</body>
</html>